<template>
  <h3>防抖</h3>
  <div>在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。</div>
  <input type="text" v-model="count" />
  <div>这是请求次数------------- {{ text }}</div>
</template>
<script setup lang="ts">
// 从 vue 中引入 customRef 和 ref
import { customRef, ref } from 'vue'
let text = ref(0)

const ajax = () => {
  text.value++
  console.log(text)
}

const count = debounceRef(0, 1000)

// data 为创建时的数据
// delay 为防抖时间
function debounceRef(data: any, delay = 300) {
  let timer: any = null
  return delay == null
    ? ref(data)
    : // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
      customRef((track, trigger) => {
        return {
          get() {
            // 收集依赖
            track()
            // 返回当前数据的值
            return data
          },
          set(value) {
            // 清除定时器
            if (timer != null) {
              clearTimeout(timer)
              timer = null
            }
            // 创建定时器
            timer = setTimeout(() => {
              ajax()
              // 修改数据
              data = value
              // 派发更新
              trigger()
            }, delay)
          }
        }
      })
}
</script>
<style scoped lang="scss"></style>
